<template>
<div id="login">
	<el-form class="login" :rules="rules" ref="form" :model="loginForm">
		<div class="title">欢迎登录管理系统</div>
		<el-form-item prop="account">
			<el-input type="text" v-model="loginForm.account" placeholder="请输入您的账号"></el-input>
		</el-form-item>
		<el-form-item prop="password">
			<el-input type="password" v-model="loginForm.password" placeholder="请输入您的登录密码"></el-input>
		</el-form-item>
		<el-form-item>
			<el-checkbox v-model="checked">记住用户名</el-checkbox>
		</el-form-item>
		<el-button type="primary" @click="submitForm('form')">登录</el-button>
		<br>
		<!-- <el-button @click="resetForm('form')">重置</el-button> -->
	
	</el-form>
</div>
</template>
<script>
export default {
	name: 'login',
	data () {
		return {
			loginForm: {
				username: '',
				userpwd: ''
			},
			rules : {
				account: [
					{ required: true, message: '请输入账号', trigger: 'blur' },
					{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
					{ min: 6, message: '密码长度不少于 6 个字符', trigger: 'blur' }
				],
			},
			input: '',
			checked: true
		}
	},
	methods: {
		// submitForm: function (formName) {
		submitForm (formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.$message({
						message: '登录成功',
						type: 'success'
					})
					// this.$message({
					// 	message: '警告哦，这是一条警告消息',
					// 	type: 'warning'
					// })
					// this.$message.error('用户名或密码输入错误');
				} else {
					console.log('error submit!');
					return false;
				}
			})
		},
		resetForm(formName) {
			if (!this.loginForm.username || !this.loginForm.password)
			this.$refs[formName].resetFields();
		}
	}
}
</script>
<style lang="scss" scoped>
	/* * {
		font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
	} */
	#login {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		background: url(./images/Background.bc21f64a.png) no-repeat 50%;
		background-size: cover;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		.login {
			width: 400px;
			height: 350px;
			background: #fff;
			border-radius: 4px;
			/*border-radius: 0 20px 20px 0;*/
			padding: 40px 60px 40px 60px;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			display: grid;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
		}
		.title {
			font-size: 24px;
			color: #676d78;
			text-align: center;
			margin-bottom: 30px;
		}
	}
</style>
